<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">扫码找样</block>
		</cu-custom>

		<view class="cu-form-group margin-top">
			<view class="title">产品编号</view>
			<input name="code" @confirm="searchSample" confirm-type="search" v-model="code" placeholder="扫码或输入完整产品编号"></input>
			<button class='cu-btn bg-blue shadow cuIcon-scan' @tap="scanCode"></button>
		</view>

		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>产品档案信息
			</view>
		</view>
		<view class="cu-list menu" >
			<view class="cu-item" >
				<view class="content padding-tb-sm">
					<!-- 其他动态扩展的字段展示 -->
					<view v-if="row.Product.othersRows" v-for="(other,i) in row.Product.othersRows" :key="i" class="flex text-sm">
						<view v-if="row.Product.others[i*2]" class="flex-sub margin-right-xs">{{row.Product.others[i*2]['title']}}：{{row.Product.others[i*2]['value']}}</view>
						<view v-if="row.Product.others[i*2+1]" class="flex-sub margin-right-xs">{{row.Product.others[i*2+1]['title']}}：{{row.Product.others[i*2+1]['value']}}</view>
					</view>
					<view class="flex text-sm">
						<view class="flex-sub margin-right-xs">备注：{{row.Product.memo || ''}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>最新样品入库信息
			</view>
		</view>
		<view class="cu-list menu">
			<view class="cu-item" >
				<view class="content padding-tb-sm">
					<view class="flex text-sm">
						<view class="flex-sub margin-right-xs">入库日期：{{row.rukuDate || ''}}</view>
						<view class="flex-sub margin-right-xs">用途：{{row.purpose || ''}}</view>
					</view>
					<view class="flex text-sm">
						<view class="flex-sub margin-right-xs">产品编号：{{row.code || ''}}</view>
						<view class="flex-sub margin-right-xs">产品名称：{{row.Product.proName || ''}}</view>
					</view>					
					<view class="flex text-sm">
						<view class="flex-sub margin-right-xs">格型：{{row.gexing || ''}}</view>
						<view class="flex-sub margin-right-xs">组织：{{row.zuzhi || ''}}</view>
					</view>
					<view class="flex text-sm">
						<view class="flex-sub margin-right-xs">样品类型：{{row.type || ''}}</view>
						<view class="flex-sub margin-right-xs">样品来源：{{row.reason || ''}}</view>
					</view>
					<view class="flex text-sm">
						<view class="flex-sub margin-right-xs">花型颜色：{{row.proDesc || ''}}</view>
					</view>
					<view class="flex text-sm">
						<view class="flex-sub margin-right-xs">后整理：{{row.hzl || ''}}</view>
					</view>
					<!-- <view class="flex text-sm">
						<view class="flex-sub margin-right-xs">库位：{{row.kuweiName || ''}}</view>
						<view class="flex-sub margin-right-xs">库存：{{row.kucun || ''}}</view>
					</view> -->
					<view class="flex text-sm">
						<view class="flex-sub margin-right-xs">备注：{{row.memoView || ''}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-form-group margin-top" @click="viewKucun">
			<view class="flex-sub text-center">
				<view class="padding text-blue">
					浏览库存 <text class="cuIcon-right text-xs"></text>
				</view>
			</view>
		</view>

		<view class="cu-bar bg-white  margin-top solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>最新入库样品个性图片
			</view>
			<view class="action"></view>
		</view>
		<view class="bg-white padding">
			<view class="grid col-4 grid-square">
				<view class="bg-img" @tap="previewImg" v-for="(item,index) in avatar" :key="index" :data-index="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
			</view>
		</view>

		<view class="cu-bar bg-white  margin-top solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>样品档案图片
			</view>
			<view class="action"></view>
		</view>
		<view class="bg-white padding">
			<view class="grid col-4 grid-square">
				<view class="bg-img" @tap="previewImgP" v-for="(item,index) in pavatar" :key="index" :data-index="index" :style="[{ backgroundImage:'url(' + pavatar[index] + ')' }]"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import formatData from '@/common/formData.js';
	export default {
		data() {
			return {
				//需要获取导航栏的高度，不同终端下不一样
				topModalStyle:"margin-top:"+ (this.CustomBar+5) + "px;",
				//数据获取url
				url :'',
				//数据集
				row :{
					rukuDate:'',
					purpose:'',
					Product:{}
				},
				code:'',
				avatar:[],
				pavatar:[],
			}
		},
		onLoad(query) {

		},
		onShow(){

		},
		onReachBottom() {

		},
		onPullDownRefresh() {

		},
		onUnload() {

		},
		destroyed() {

		},
		methods: {
			scanCode(e){
				var _this = this;
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						_this.code = res.result;
						_this.loadData();
				    }
				});
			},
			searchSample(e){
				var code = e.detail.value;
				this.code = code;
				this.loadData();
			},
			viewKucun(){
				if(!this.code){
					uni.showToast({
						icon:'none',
						title:"请先扫码",
						duration:1500,
						mask:false
					});
					return false;
				}
				var loadParam = JSON.stringify({code:this.code});
				uni.navigateTo({
				    url: '/pages/sample/kucunList?loadParam='+loadParam
				});
			},
			previewImg(e){
				console.log(e);
				var _index = e.target.dataset.index || 0;
				uni.previewImage({
					current:this.avatar[_index] ,
					urls : this.avatar,
					// loop:true,
					// longPressActions: {
					// 	itemList: ['发送给朋友', '保存图片', '收藏'],
					// 	success: function(data) {
					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errMsg);
					// 	}
					// }
				});
			},
			previewImgP(e){
				console.log(e);
				var _index = e.target.dataset.index || 0;
				uni.previewImage({
					current:this.pavatar[_index] ,
					urls : this.pavatar,
				});
			},
			//远程载入数据
			//载入完成后执行后面的回调函数
			loadData() {
				if(!this.code){
					uni.showToast({
						icon:'none',
						title:"请先扫码",
						duration:1500,
						mask:false
					});
					return false;
				}

				uni.showLoading({
					mask:true,
					title:'加载数据...',
				});

				var params = {
					method:'sample.code.search',
					code:this.code,
				};
			    formatData.set(params);
				uni.request({
					url: formatData.httpUrl(),
					data:params,
					success: (res) => {
						var result = res.data.data;
						this.row = result.row;
						this.avatar = result.row.imageSrc || [];
						this.pavatar = result.row.Product.imageSrc || [];
					},
					complete(res) {
						//隐藏载入效果
						uni.hideLoading();
					},
				});
			},
		}
	}
</script>

<style>
</style>
